<script setup lang='ts'>
import { showToast } from "vant";
import { ref } from "vue"
import { useRouter } from "vue-router";
import { useCounterStore } from "@/stores/counter";
const store = useCounterStore()
const checked = ref<boolean>(false)
const $router = useRouter()
const phone = ref<string>('19832842457')
const password = ref<string>('')
const phoneBlur = () => {
    if (phone.value == '') {
        showToast('请输入手机号码！')
    }
    const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/

    if (reg.test(phone.value)) {
        showToast('请输入密码！')

    } else {
        showToast('请输入正确手机号码！')
        password.value = ''
    }
}

const loginSuccess = () => {
    if (!checked.value) {
        showToast('请勾选条款！')
        return
    }
    showToast('登录成功！')
    let obj = {
        phone: phone.value,
        token: Date.now(),
        gender: '保密',
        avatar: 'https://easyreadfs.nosdn.127.net/RsyqfItTi1c4eJ3Nmm6a9A==/8796093023794550480',
        nickName: '捌玖不离拾'
    }
    localStorage.setItem('userInfo', `${JSON.stringify(obj)}`)
    store.getUserInfo(obj)
    setTimeout(() => {
        let querys = $router.currentRoute.value.query
        if (querys.source_uuid && !querys.content_uuid) {
            $router.push({ path: '/all-comment', query: { source_uuid: querys.source_uuid, url: querys.url } })
        } else if (querys.source_uuid && querys.content_uuid) {
            $router.push({ path: 'content', query: querys })
        }
        else {
            $router.push('/my')
        }
    }, 1000)
}
</script>

<template>
    <div class="login">
        <div class="login-title">
            <img src="@/assets/imgs/叉1.png" alt="" @click="$router.push('/my')">
            <span>登录</span>
            <span></span>
        </div>
        <div class="login-content">
            <div class="phone">
                <img src="@/assets/imgs/手机.png" alt="">
                <input type="text" placeholder="手机号" v-model="phone" @blur="phoneBlur">
                <img src="@/assets/imgs/叉叉.png" alt="" v-if="phone != ''" @click="phone = ''">
            </div>
            <div class="password">
                <img src="@/assets/imgs/锁2.png" alt="">
                <input type="password" placeholder="密码" v-model="password">
                <img src="@/assets/imgs/叉叉.png" alt="" v-if="password != ''" @click="password = ''">
            </div>
            <div class="to-login" :class="{ active: password != '' && phone != '' }" @click="loginSuccess">
                <span>登录</span>
            </div>
            <div class="else-action">
                <span>忘记密码</span>
                <span>手机号注册</span>
            </div>
            <div class="login-else">
                <img src="@/assets/imgs/微信.png" alt="">
                <img src="@/assets/imgs/微博.png" alt="">
                <img src="@/assets/imgs/短信管理.png" alt="">
            </div>
            <div class="clause">
                <van-checkbox v-model="checked" checked-color="#888" class="radio">
                    <p>你已同意"<span>服务条款</span>"、"<span>隐私政策</span>"和"<span>网易云阅读儿童个人信息保护规则及监护人须知</span>"</p>
                </van-checkbox>

            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.login {
    width: 100vw;
    height: 100vh;

    .login-title {
        height: 50rem;
        padding: 0 10rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
            width: 28rem;
            height: 28rem;
        }

        span {
            font-size: 17rem;
            color: #333;
        }
    }

    .login-content {
        width: 100%;
        height: calc(100vh - 50rem);
        background-color: rgb(245, 245, 245);
        display: flex;
        flex-direction: column;
        align-items: center;

        .phone,
        .password {
            width: 80%;
            height: 50rem;
            border-radius: 25rem;
            border: 1rem solid #ccc;
            background-color: rgb(250, 250, 250);
            padding-right: 5rem;
            display: flex;
            align-items: center;
            margin-top: 100rem;

            img {
                width: 20rem;
                height: 20rem;
                margin: 0 10rem;
            }

            input {
                flex-grow: 1;
                border: none;
                background-color: rgb(250, 250, 250);
            }
        }

        .password {
            margin-top: 15rem;
        }

        .to-login {
            margin-top: 20rem;
            width: 80%;
            height: 50rem;
            background-color: #f06666;
            border-radius: 25rem;
            display: flex;
            justify-content: center;
            align-items: center;

            &.active {
                background-color: #fc1c1c;
            }

            span {
                font-size: 17rem;
                color: #fff;
                font-weight: bold;
            }
        }

        .else-action {
            width: 80%;
            margin-top: 20rem;
            display: flex;
            justify-content: space-between;

            span {
                font-size: 16rem;
                color: #333;

                &:last-child {
                    color: #fc1c1c;
                }
            }

        }

        .login-else {
            display: flex;
            width: 60%;
            justify-content: space-between;
            margin-top: 160rem;

            img {
                width: 40rem;
                height: 40rem;
            }
        }

        .clause {
            margin-top: 15rem;
            display: flex;
            width: 80%;

            .radio {
                margin-right: 10rem;

                p {
                    font-size: 14rem;
                    color: #666;

                    span {
                        color: rgb(8, 142, 231);
                    }
                }
            }
        }
    }

}
</style>
